<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="基础配置" name="first">
      <el-scrollbar style="height:calc(100vh - 60px)">
        <el-divider content-position="left">基础配置</el-divider>
        <el-form v-model="form" label-width="120px" size="mini">
          <el-form-item label="id">
            <el-input v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item label="节点名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="审批类型">
            <el-radio-group v-model="extended.setType" @change="changeSetType">
              <el-radio :label="1">指定人员</el-radio>
              <el-radio :label="2">用户自选</el-radio>
              <el-radio :label="3">指定环节</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择节点" v-if="extended.setType==3">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="$refs.PointUserTaskNodeSelect.open()">
              添加
            </el-button>
            <UserSelectList ref="UserSelectList" v-model="extended"></UserSelectList>
          </el-form-item>
          <el-form-item label="选择用户:" v-else>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="$refs.UserSelectList.open()">
              添加
            </el-button>
            <UserSelectList ref="UserSelectList" v-model="extended"></UserSelectList>
          </el-form-item>
          <el-form-item label="可撤回节点">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="$refs.UserTaskNodeSelect.open()">
              添加
            </el-button>
            <RejectUserTaskNodeSelect ref="UserTaskNodeSelect" v-model="extended"></RejectUserTaskNodeSelect>
            <PointUserTaskNodeSelect ref="PointUserTaskNodeSelect" v-model="extended"></PointUserTaskNodeSelect>
          </el-form-item>
          <el-form-item label="为空默认用户">
            <el-checkbox v-model="extended.defaultTopUser"></el-checkbox>
          </el-form-item>
          <el-form-item label="多实例">
            <el-switch :value="multiInstance" @change="multiInstanceChange"></el-switch>
          </el-form-item>
          <MultiInstance
            v-if="multiInstance"
            :element="form.loopCharacteristics"
            :collectionEdit="extended.setType===3"
            ref="multiInstance"></MultiInstance>
          <el-divider content-position="left">节点按钮</el-divider>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="$refs.ButtonList.open()">添加
          </el-button>
          <ButtonList v-model="extended" ref="ButtonList"></ButtonList>
          <div class="button-tag">
            <el-tag
              closable
              v-for="(item,index) in extended.buttonList"
              :key="index"
              @close="extended.buttonList.splice(index,1)">{{ item.name }}
            </el-tag>
          </div>
        </el-form>
        <UserTaskCustomProperties v-model="extended"/>
      </el-scrollbar>
    </el-tab-pane>
    <el-tab-pane label="监听器" name="second">
      <el-divider>任务监听器</el-divider>
      <ListenerTable v-model="form.extensionElements"></ListenerTable>
      <el-divider>流程监听器</el-divider>
      <ListenerTable type="execution" v-model="form.extensionElements"></ListenerTable>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
    import mixins from './mixins'
    import ListenerTable from './common/ListenerTable'
    import UserSelect from './common/UserSelect'
    import UserTaskCustomProperties from './UserTaskCustomProperties'
    import MultiInstance from './UserTask/MultiInstance'
    import bpmnHelper from './bpmnHelper'
    import UserSelectList from './common/UserSelectList'
    import RejectUserTaskNodeSelect from './common/RejectUserTaskNodeSelect'
    import PointUserTaskNodeSelect from './common/PointUserTaskNodeSelect'
    import ButtonList from './common/ButtonList'

    export default {
        mixins: [mixins, bpmnHelper],
        components: {
            ButtonList,
            UserSelectList,
          RejectUserTaskNodeSelect,
          PointUserTaskNodeSelect,
            ListenerTable,
            MultiInstance,
            UserSelect,
            UserTaskCustomProperties,
        },
        data() {
            return {
                inited: false,
                activeName: 'first',
                extended: {
                    setType: 1,
                  defaultTopUser:false
                },
                form: {
                    id: '',
                    name: '',
                    assignee: '',
                    loopCharacteristics: null,
                    extensionElements: [],
                },
            }
        },
        computed: {
            customElements() {
                return this.form.extensionElements.find(x => {
                    return x.$type === 'flowable:Extended'
                })
            },
            multiInstance() {
                return !!this.form.loopCharacteristics
            }
        },
        watch: {
            'form.extensionElements'(n) {
                this.initExtended(n)
            },

            extended: {
                deep: true,
                handler: function (newV, oldV) {
                    if (this.customElements && this.inited) {
                        this.modeling().updateModdleProperties(this.element, this.customElements, {body: JSON.stringify(newV)})
                    }
                }
            }
        },
        methods: {
            multiInstanceChange(val) {
                if (val) {
                    this.form.loopCharacteristics = this.bpmnFactory().create('bpmn:MultiInstanceLoopCharacteristics')
                    this.form.loopCharacteristics.$parent = this.element
                    this.form.loopCharacteristics.collection = '${userTaskService.getUserList(execution)}'
                    this.form.loopCharacteristics.elementVariable = 'singleUser_'
                  this.changeSetType(this.extended.setType)
                } else {
                    this.form.loopCharacteristics = null
                }
            },
            initExtended(n) {
                this.inited = false
                const data = this.customElements
                if (!data) {
                    //默认添加拓展属性
                    const extended = this.bpmnFactory().create('flowable:Extended', {body: JSON.stringify(this.extended)})
                    n.push(extended)
                } else {
                    this.extended = JSON.parse(data.get('body'))
                }
                this.$nextTick(() => {
                    this.inited = true
                })
            },
            changeSetType(type) {
                switch (type) {
                    case 1:
                    case 2:
                        this.form.assignee = '${userTaskService.getUser(execution)}'
                      if(this.multiInstance){
                        this.$refs.multiInstance.form.collection = '${userTaskService.getUserList(execution)}'
                        this.$refs.multiInstance.form.elementVariable = 'singleUser_'
                      }
                        break
                    case 3:
                        this.form.assignee = ''
                            if(this.multiInstance){
                              this.$refs.multiInstance.form.collection = ''
                              this.$refs.multiInstance.form.elementVariable = ''
                            }
                        break
                }
            }
        },
        created() {
            this.definitions = {
                ...this.definitions,
                extended: {
                    type: 'flowable:Extended',
                    field: 'body',
                }
            }
            this.init('form', this.form)
            this.initExtended(this.form.extensionElements)
          this.form.assignee = '${userTaskService.getUser(execution)}'
        },
        mounted() {

        },
    }
</script>
<style lang="scss" scoped>
    .el-form {
        .el-form-item__label {
            font-weight: 700;
        }
    }

    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .el-form-item {
        /deep/ .el-form-item__label:after {
            content: ":";
            position: relative;
            top: -.5px;
            margin: 0 8px 0 2px;
        }
    }

    .button-tag {
        .el-tag {
            margin-top: 5px;
            margin-right: 5px;
        }
    }

</style>
